[CSS] outline을 둥글게 표현하는 방법은? radius

CSS를 사용하여 outline을 둥글게 만드는 방법이 있을까요? border-radius와 같은 css 속성이 outline에 있다면 참 좋을텐데요... 아래에서 방법을 알아봅니다.

! outline 속성은?

이 css 속성은 해당 요소에 외곽선을 만들어주며 border와 비슷하지만 다르게 동작합니다. 일단 outline은 해당 엘리먼트와 간섭되지 않고 별개로 외곽선이 만들어지는 차이점이 있습니다. border는 엘리먼트 내부 공간에 영향을 미치죠.

이런 이유로 outline 역시 많이 쓰이거나 border와 함께 사용됩니다. 그런데 만약 둥글게 표현할 경우 outline-radius와 같은 방법이 없으므로 다른 대안이 필요합니다. 어떤 트릭이 있을지 아래에서 알아봅니다.

# outline 둥글게 만들기 방법 알아보기

이 방법들은 대안으로 적용 가능한 좋은 예입니다. 더 좋은 방법이 있다면 어 좋겠죠~ 우선 많이 쓰이는 방법으로 아래의 두 가지가 쓰입니다.

• 1. box-shadow를 대신 사용하기
• 2. pseudo element 사용하기
  

아래에서 하나씩 알아봅니다.

! box-shadow를 사용하기

먼저 box-shadow의 smooth 정도를 조절하여 마치 둥근 outline처럼 사용할 수 있습니다. 아래 예제를 봐주세요.

이제 css style을 적용합니다.

focus인 경우.. 즉 활성화 상태일 경우 box-shadow가 적용됩니다. 매우 쉽고 간단하죠. 일단 기존의 outline은 none으로 비활성화하고 대신 boz-shadow를 적용합니다.

만약 부드럽게 사용할 경우라면 아래처럼 smooth 정도를 조절합니다.

간단하죠? 참고로 물론 border를 사용할 수도 있으나 위에 언급한 것처럼 내부 엘리먼트가 변하여 콘텐츠에 움직임이 나타날 수 있어 box-shadow가 사용되는 이유입니다.

! pseudo element를 사용하기

또 다른 방법으로 pseudo-element를 사용하는 방법이 존재합니다. 이 방법도 매우 효과적이나 코드가 좀 더 길죠. 방법은 간단합니다. 아래처럼 ::before 또는 ::after를 사용해 외곽선 요소를 하나 더 만들면 됩니다.

border를 css로 사용하므로 코드는 더 친숙합니다. 이 방법도 같이 알아두시기 바랍니다.

여기까지 outline 속성을 둥글게 표현하는 방법을 일아보았습니다.